<template>
  <div id="user">
    <div class="user-frame">
      <div class="user-frame_nav">
        <UserNavHeader @ActiveNav="ActiveNav" />
      </div>
      <div class="user-frame_content">
        <div v-if="!isActive" class="clollect">
          <UserCollect />
        </div>
        <div v-else class="history">
          <UserHistory title="历史记录" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

import UserNavHeader from './components/UserNavHeader.vue'
import UserCollect from './components/UserCollect.vue'
import UserHistory from './components/UserHistory.vue'

export default {
  name: 'User',
  components: {
    UserNavHeader,
    UserCollect,
    UserHistory
  },
  setup() {
    const isActive = ref(true)
    function ActiveNav(value) {
      isActive.value = value
    }

    return {
      isActive,
      ActiveNav
    }
  }
}
</script>

<style lang="scss" scoped>
#user {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 16px 70px 40px 40px;
  box-sizing: border-box;
  .user-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    &_nav {
      position: relative;
      display: flex;
      justify-content: center;
      height: 70px;
      transform: translateY(8px);
    }
    &_content {
      flex: 1;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background-color: $box_bg;
      z-index: 10;
      overflow-y: auto;
    }
  }
}
</style>
